<template>
  <div class="community_main">
    <a-card
      style="width:100%"
      :bordered="false"
      :tabList="tabListNoTitle"
      :activeTabKey="noTitleKey"
      @tabChange="key => handleTabChange(key, 'noTitleKey')"
    >
      <proposal-page v-if="noTitleKey === 'proposal'"></proposal-page>
      <complaint-page v-else-if="noTitleKey === 'complaint'"></complaint-page>
      <assist-page v-else></assist-page>
    </a-card>
  </div>
</template>

<script>
import ProposalPage from './ProposalPage.vue'
import ComplaintPage from './ComplaintPage.vue'
import AssistPage from './AssistPage.vue'
export default {
  components: {
    ProposalPage,
    ComplaintPage,
    AssistPage
  },
  data() {
    return {
      tabListNoTitle: [
        {
          key: 'proposal',
          tab: '我的建议'
        },
        {
          key: 'complaint',
          tab: '我的吐槽'
        },
        {
          key: 'assist',
          tab: '我的帮助'
        }
      ],
      noTitleKey: 'proposal'
    }
  },
  methods: {
    handleTabChange(key, type) {
      this[type] = key
    }
  }
}
</script>

<style lang="less" scoped>
.community_main {
  /deep/.ant-tabs-tab {
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
  }
}
</style>
